var milestones = [];
    milestones = {
    0: {
        id: 1,
        year: 2009,
        description: "Offizieller Service-Partner der SAP"
    },
    1: {
        id: 2,
        year: 2010,
        description: "Bla Bla Bla"
    },
    2: {
        id: 3,
        year: 2011,
        description: "Blu Blu Blu"
    },
    3: {
        id: 4,
        year: 2012,
        description: "Ble Ble Ble"
    }
}

window.onload = function(){
    
    var stage = new Kinetic.Stage({
        container: 'timeline',
        width: 635,
        height: 220
    });
    
    var layer = new Kinetic.Layer();
    
    var timeline = new Kinetic.Line({
        points: [{
            x: 10,
            y: stage.getHeight() / 1.3
        },{
            x: stage.getWidth() - 10,
            y: stage.getHeight() / 1.3
        }],
        stroke: '#fff',
        strokeWidth: 2
    }); 
    
    var leftLine = new Kinetic.Line({
        points: [{
            x: 30,
            y: 30
        },{
            x: 30,
            y: 190
        }],
        stroke: '#fff',
        strokeWidth: 2
    });
    
    var rightLine = new Kinetic.Line({
        points: [{
            x: stage.getWidth() - 30,
            y: 30
        },{
            x: stage.getWidth() - 30,
            y: 190
        }],
        stroke: '#fff',
        strokeWidth: 2
    });
    length = 0;
    for(i in milestones) length++;
    timeDist = (stage.getWidth() - 60) / length;
    
    y = timeline.getPoints()[0].y;
    
    for(i in milestones){   
        dist = timeDist * i++;
        var line = new Kinetic.Line({
            points: [{
                x: dist,
                y: y - 5
            },{
                x: dist,
                y: y + 5
            }],
        stroke: '#fff',
        strokeWidth: 2  
        });
        layer.add(line);
    }  
    
    
    layer.add(timeline);
    layer.add(leftLine);
    layer.add(rightLine);
    stage.add(layer);
    
};

